<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人博客-主页</title>
    <link rel="icon" href="images/icon.icon">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">
    <!-- 引入轮播图js -->
    
    
    <script src="js/s_roll.js"></script>
     <!-- 引入字体图标 -->
     <style>
         @font-face {
        font-family: 'icomoon';
        src:  url('fonts/icomoon.eot?42pqcu');
        src:  url('fonts/icomoon.eot?42pqcu#iefix') format('embedded-opentype'),
          url('fonts/icomoon.ttf?42pqcu') format('truetype'),
          url('fonts/icomoon.woff?42pqcu') format('woff'),
          url('fonts/icomoon.svg?42pqcu#icomoon') format('svg');
        font-weight: normal;
        font-style: normal;
        font-display: block;
      }
      span{
        font-family: 'icomoon';
      }
     </style>
</head>
<body>
    <!-- 网页头部模块开始 -->
    <header>
        <div class="logo">
            <a href="#"><img class="circle" src="images/tx.png" alt=""></a>
        </div>
        <nav>
            <div class="nav_list">
                <ul>
                    <li><a href="index.html">主页</a></li>
                    <li><a href="#">关于</a></li>
                    <li><a href="advertising.html">公告</a></li>
                    <li class="dropdown">
                        <a href="#">板块</a>
                        <div class="content">
                            <a href="#">php中文网</a>
                            <a href="#">vue框架</a>
                            <a href="#">网页样式</a>
                        </div>
                    </li>
                    <li><a href="#">评论</a></li>
                    <li><a href="#">更多<span></span></a></li>
                </ul>
            </div>
            <div class="login">
                <a href="register.html"><span></span>登录</a>
            </div>
        </nav>
        <div class="icoms">
            <ul>
                <li><a href="#"><span></span></a></li>
                <li><a href="#"><span></span></a></li>
                <li><a href="#"><span></span></a></li>
                <li><a href="#"><span></span></a></li>
                <li><a href="#"><span></span></a></li>
            </ul>
        </div>
    </header>
    <!-- 网页头部模块结束 -->

    <!-- 背景样式开始 -->
    <div class="title">
        <h1>个人博客</h1>
        <h4>Your Go-to Source</h4>
    </div>
    <!-- 背景样式结束 -->

    <!-- 要点模块开始 -->
    <div class="select w">
        <div class="s_message">
            <h2><a href=https://blog.csdn.net/m0_55905001/article/details/124697272>Javascript易错点</a></h2>
            <p>
                <dl>
                    <dd><h3>1. js中数组长度和索引的关系</h3>
                        js下标可越界，返回值为undefined，长度由最大索引决定，而其它语言都是长度决定最大索引
                    </dd>
                    <dd><h3>2. reduce的参数问题</h3>
                        reduce在遍历数组的时候，里面第一个参数是一个回调函数，回调函数里的第一个参数prev是上一次循环的返回值，第二个参数curr是当前遍历的元素，如果不特殊声明的话，第一次遍历数组的时候，prev是使用的数组的第一个元素，curr使用的是第二个元素，有些时候我们需要curr从第一个元素开始，那么我们可以给reduce里面的第二个参数赋值，第二个参数就是prev的初始值，写了第二个参数，prev就不会占用数组的第一个元素了
                      </dd>
                      <dd>......</dd>
                </dl>
            </p>
        </div>
        <div class="s_roll">
            <div id="box">
                <ul>
                  <li><a href="upload/roll_1.png"><img src="upload/roll_1.png" alt="" /></a></li>
                  <li><a href="upload/roll_2.png"><img src="upload/roll_2.png" alt="" /></a></li>
                  <li><a href="upload/roll_3.png"><img src="upload/roll_3.png" alt="" /></a></li>
                  <li><a href="upload/roll_4.png"><img src="upload/roll_4.png" alt="" /></a></li>
                </ul>
              </div>
        </div>
    </div>
    <!-- 要点模块结束 -->

          <!-- content模块开始 -->
         <article>
             <!-- 搜索框 -->
        <form action="">
            <p class="form">
              <input type="text" name="uname" placeholder="请输入你要检索的内容"/>
              <button>
                <span></span>
              </button>
            </p>
          </form>
            <div class="content w">
                <div class="message">
                    <div class="left">
                        <dl class="m_left">
                            <img src="upload/lg-1-1.png" alt="">
                            <div class="m_hd">
                                <dt>灵感源泉
                                    <dd><a href="https://www.bossdesign.cn/14-tools-design-webdesigner/">Boss站长整理</a></dd>
                                    <dd><a href="https://www.bossdesign.cn/design-software/">Boos设计</a></dd>
                                    <dd><a href="https://pmgeek.net/cn/index.html#">产品极客</a></dd>
                                    <dd><a href="https://www.behance.net/galleries/illustration/character-design">Behance</a></dd>
                                    <dd><a href="https://creativemass.cn/#/section-9">creativemass</a></dd>
                                    <dd><a href="https://www.bossdesign.cn/gallery/">bossdesign</a></dd>
                                 </dt>
                            </div>
                        </dl>
                        <dl class="m_left">
                            <img src="upload/lg.png" alt="">
                            <div class="m_hd">
                                <dt>灵感源泉
                                    <dd><a href="https://www.bossdesign.cn/14-tools-design-webdesigner/">Boss站长整理</a></dd>
                                    <dd><a href="https://www.bossdesign.cn/design-software/">Boos设计</a></dd>
                                    <dd><a href="https://pmgeek.net/cn/index.html#">产品极客</a></dd>
                                    <dd><a href="https://www.behance.net/galleries/illustration/character-design">Behance</a></dd>
                                    <dd><a href="https://creativemass.cn/#/section-9">creativemass</a></dd>
                                </dt>
                            </div>
                        </dl>
                        <dl class="m_left">
                            <img src="upload/lg-1-2.png" alt="">
                            <div class="m_hd">
                                <dt>
                                    <div class="essay">
                                        <h3><a href="https://www.cnblogs.com/coco1s/p/14180476.html">position: sticky;失效的原因？</a></h3>
                                        <p>position:sticky 的生效规则，明白了生效规则就会知道为什么有的时候设定的 sticky 会失效：
        
                                            须指定 top, right, bottom 或 left 四个阈值其中之一（且达到设定的阈值），才可使粘性定位生效。否则其行为与相对定位相同；
                                            并且 top 和 bottom 同时设置时，top 生效的优先级高，left 和 right 同时设置时，left 的优先级高
                                            设定为 position: sticky 的元素的任意父节点的 overflow 属性必须是 visible，否则 position:sticky 不会生效；在满足上述情况下，设定了 position: sticky 的元素的父容器的高度必须大于当前元素，否则也会失效。（当然，此时，sticky 吸附的基准元素就会变成父元素）
                                            如果 position: sticky 元素的任意父节点定位设置为 position: overflow，则父容器无法进行滚动，所以 position:sticky 元素也不会有滚动然后固定的情况
                                            在满足上述情况下，设定了 position: sticky 的元素的父容器的高度必须大于当前元素，否则也会失效。（当然，此时，sticky 吸附的基准元素就会变成父元素）
                                        </p>
                                    </div>
                                </dt>
                            </div>
                        </dl>
                        <dl class="m_left">
                            <img src="upload/lg-1-5.png" alt="">
                            <div class="m_hd">
                                <dt>灵感源泉
                                    <dd><a href="https://www.bossdesign.cn/14-tools-design-webdesigner/">Boss站长整理</a></dd>
                                    <dd><a href="https://www.bossdesign.cn/design-software/">Boos设计</a></dd>
                                    <dd><a href="https://pmgeek.net/cn/index.html#">产品极客</a></dd>
                                    <dd><a href="https://www.behance.net/galleries/illustration/character-design">Behance</a></dd>
                                    <dd><a href="https://creativemass.cn/#/section-9">creativemass</a></dd>
                                </dt>
                            </div>
                        </dl> 
                        <dl class="m_left">
                            <img src="upload/lg-1-3.png" alt="">
                            <div class="m_hd">
                                <dt>
                                    <div class="essay">
                                        <h3><a href="https://www.cnblogs.com/coco1s/p/14180476.html">position: sticky;失效的原因？</a></h3>
                                        <p>position:sticky 的生效规则，明白了生效规则就会知道为什么有的时候设定的 sticky 会失效：
        
                                            须指定 top, right, bottom 或 left 四个阈值其中之一（且达到设定的阈值），才可使粘性定位生效。否则其行为与相对定位相同；
                                            并且 top 和 bottom 同时设置时，top 生效的优先级高，left 和 right 同时设置时，left 的优先级高
                                            设定为 position: sticky 的元素的任意父节点的 overflow 属性必须是 visible，否则 position:sticky 不会生效；在满足上述情况下，设定了 position: sticky 的元素的父容器的高度必须大于当前元素，否则也会失效。（当然，此时，sticky 吸附的基准元素就会变成父元素）
                                            如果 position: sticky 元素的任意父节点定位设置为 position: overflow，则父容器无法进行滚动，所以 position:sticky 元素也不会有滚动然后固定的情况
                                            在满足上述情况下，设定了 position: sticky 的元素的父容器的高度必须大于当前元素，否则也会失效。（当然，此时，sticky 吸附的基准元素就会变成父元素）
                                        </p>
                                    </div>
                                </dt>
                            </div>
                        </dl>
                        <dl class="m_left">
                            <img src="upload/lg-1-3.png" alt="">
                            <div class="m_hd">
                                <dt>
                                    <div class="essay">
                                        <h3><a href="https://www.cnblogs.com/coco1s/p/14180476.html">position: sticky;失效的原因？</a></h3>
                                        <p>position:sticky 的生效规则，明白了生效规则就会知道为什么有的时候设定的 sticky 会失效：
        
                                            须指定 top, right, bottom 或 left 四个阈值其中之一（且达到设定的阈值），才可使粘性定位生效。否则其行为与相对定位相同；
                                            并且 top 和 bottom 同时设置时，top 生效的优先级高，left 和 right 同时设置时，left 的优先级高
                                            设定为 position: sticky 的元素的任意父节点的 overflow 属性必须是 visible，否则 position:sticky 不会生效；在满足上述情况下，设定了 position: sticky 的元素的父容器的高度必须大于当前元素，否则也会失效。（当然，此时，sticky 吸附的基准元素就会变成父元素）
                                            如果 position: sticky 元素的任意父节点定位设置为 position: overflow，则父容器无法进行滚动，所以 position:sticky 元素也不会有滚动然后固定的情况
                                            在满足上述情况下，设定了 position: sticky 的元素的父容器的高度必须大于当前元素，否则也会失效。（当然，此时，sticky 吸附的基准元素就会变成父元素）
                                        </p>
                                    </div>
                                </dt>
                            </div>
                        </dl>
                        <dl class="m_left">
                            <img src="upload/lg-1-3.png" alt="">
                            <div class="m_hd">
                                <dt>
                                    <div class="essay">
                                        <h3><a href="https://www.cnblogs.com/coco1s/p/14180476.html">position: sticky;失效的原因？</a></h3>
                                        <p>position:sticky 的生效规则，明白了生效规则就会知道为什么有的时候设定的 sticky 会失效：
        
                                            须指定 top, right, bottom 或 left 四个阈值其中之一（且达到设定的阈值），才可使粘性定位生效。否则其行为与相对定位相同；
                                            并且 top 和 bottom 同时设置时，top 生效的优先级高，left 和 right 同时设置时，left 的优先级高
                                            设定为 position: sticky 的元素的任意父节点的 overflow 属性必须是 visible，否则 position:sticky 不会生效；在满足上述情况下，设定了 position: sticky 的元素的父容器的高度必须大于当前元素，否则也会失效。（当然，此时，sticky 吸附的基准元素就会变成父元素）
                                            如果 position: sticky 元素的任意父节点定位设置为 position: overflow，则父容器无法进行滚动，所以 position:sticky 元素也不会有滚动然后固定的情况
                                            在满足上述情况下，设定了 position: sticky 的元素的父容器的高度必须大于当前元素，否则也会失效。（当然，此时，sticky 吸附的基准元素就会变成父元素）
                                        </p>
                                    </div>
                                </dt>
                            </div>
                        </dl>
                        <dl class="m_left">
                            <img src="upload/lg-1-3.png" alt="">
                            <div class="m_hd">
                                <dt>
                                    <div class="essay">
                                        <h3><a href="https://www.cnblogs.com/coco1s/p/14180476.html">position: sticky;失效的原因？</a></h3>
                                        <p>position:sticky 的生效规则，明白了生效规则就会知道为什么有的时候设定的 sticky 会失效：
        
                                            须指定 top, right, bottom 或 left 四个阈值其中之一（且达到设定的阈值），才可使粘性定位生效。否则其行为与相对定位相同；
                                            并且 top 和 bottom 同时设置时，top 生效的优先级高，left 和 right 同时设置时，left 的优先级高
                                            设定为 position: sticky 的元素的任意父节点的 overflow 属性必须是 visible，否则 position:sticky 不会生效；在满足上述情况下，设定了 position: sticky 的元素的父容器的高度必须大于当前元素，否则也会失效。（当然，此时，sticky 吸附的基准元素就会变成父元素）
                                            如果 position: sticky 元素的任意父节点定位设置为 position: overflow，则父容器无法进行滚动，所以 position:sticky 元素也不会有滚动然后固定的情况
                                            在满足上述情况下，设定了 position: sticky 的元素的父容器的高度必须大于当前元素，否则也会失效。（当然，此时，sticky 吸附的基准元素就会变成父元素）
                                        </p>
                                    </div>
                                </dt>
                            </div>
                        </dl>
                        <dl class="m_left">
                            <img src="upload/lg-1-3.png" alt="">
                            <div class="m_hd">
                                <dt>
                                    <div class="essay">
                                        <h3><a href="https://www.cnblogs.com/coco1s/p/14180476.html">position: sticky;失效的原因？</a></h3>
                                        <p>position:sticky 的生效规则，明白了生效规则就会知道为什么有的时候设定的 sticky 会失效：
        
                                            须指定 top, right, bottom 或 left 四个阈值其中之一（且达到设定的阈值），才可使粘性定位生效。否则其行为与相对定位相同；
                                            并且 top 和 bottom 同时设置时，top 生效的优先级高，left 和 right 同时设置时，left 的优先级高
                                            设定为 position: sticky 的元素的任意父节点的 overflow 属性必须是 visible，否则 position:sticky 不会生效；在满足上述情况下，设定了 position: sticky 的元素的父容器的高度必须大于当前元素，否则也会失效。（当然，此时，sticky 吸附的基准元素就会变成父元素）
                                            如果 position: sticky 元素的任意父节点定位设置为 position: overflow，则父容器无法进行滚动，所以 position:sticky 元素也不会有滚动然后固定的情况
                                            在满足上述情况下，设定了 position: sticky 的元素的父容器的高度必须大于当前元素，否则也会失效。（当然，此时，sticky 吸附的基准元素就会变成父元素）
                                        </p>
                                    </div>
                                </dt>
                            </div>
                        </dl>
                    </div>
                    <div class="right">
                        <div class="r_hd">
                            <img src="images/avatar.png" alt="">
                            <h2>哈.哈</h2>
                            <p>你来看我，我很高兴</p>
                            <!-- 文章定义模块部分开始 -->
                            <ul>
                                <li><a href="#">文章</a></li>
                                <li><a href="#">分类</a></li>
                                <li><a href="#">标签</a></li>
                            </ul>
                            <div class="statistics">
                                <ul>
                                    <li>8</li>
                                    <li>14</li>
                                    <li>6</li>
                                </ul>
                            </div>
                            <!-- 文章定义模块部分结束 -->
                        </div>
                        <div class="r_bd1">
                            <h3>提示</h3>
                            <p>CSS具有指定元素每一侧的填充的属性：<br>
                                padding-top<br>
                                padding-right<br>
                                padding-bottom<br>
                                padding-left<br>
                            </p>
                        </div>
                        <div class="r_bd1">
                            <h3>提示</h3>
                            <p>CSS 具有指定元素每一边的边距的属性：<br>
                                margin-top<br>
                                margin-right<br>
                                margin-bottom<br>
                                margin-left<br>
                            </p>
                        </div>
                    </div>
                </div>    
            </div>
         </article>
    <!-- content模块结束 -->

    <!-- music模块开始 -->
    <!-- music模块开始 -->

    
    <!-- footer页脚模块开始 -->
    <footer>
        <h3>怕催花信紧，风风雨雨，误了春光。</h3>
        <p>&copy;欢迎订阅我的博客</p>
        <ul>
            <li><a href="#"><span></span></a></li>
            <li><a href="#"><span></span></a></li>
            <li><a href="#"><span></span></a></li>
            <li><a href="#"><span></span></a></li>
            <li><a href="register.html"><span></span></a></li>
        </ul>
    </footer>
    <!-- footer页脚模块结束 -->

</body>
</html>